<template>
  <div ref="appContainer" class="app-container">
    <PropTable :loading="loading" :columns="baseColumns" :data="list" :total="total" @reset="reset" @on-submit="onSubmit">
      <template #btn>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="exportExcelTable">
            <el-icon><Download /></el-icon> 导出列表</el-button
          >
        </div>
      </template>
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="orderManage">
  import { getOrderList } from '@/api/orderManage'
  import { columns } from './constants'
  import { exportExcel, getAllDta } from '@/utils/exprotExcel'
  import { getValueById, caseIndex } from '@/utils/database'
  const loading = ref(true)
  const appContainer = ref(null)
  const total = ref(0)
  const data = []

  let baseColumns = reactive(columns)
  const list = ref(data)
  //获取列表信息
  const getTableList = (data) => {
    getOrderList(data).then((res) => {
      list.value = res.records
      total.value = res.total
    })
  }
  //导出列表数据
  const exportExcelTable = async () => {
    try {
      const allData = await getAllDta(getOrderList)
      const newdata = []
      allData.forEach((item) => {
        newdata.push({
          ...item,
          orderType: getValueById('jiaofeixiangmu', item.orderType),
          deviceId: item?.properties?.deviceId,
          //没有品牌的时候默认HD  有品牌但是没有对应的枚举值直接输出品牌原始值
          brand: caseIndex(item.brand || 'HD'),
          orderFrom: getValueById('jiaofeiqudao', item.orderFrom),
        })
      })
      exportExcel({ column: columns, data: newdata, filename: '订单管理', autoWidth: 100, format: 'xlsx' })
    } catch (error) {
      console.error('Error fetching data:', error)
    }
  }
  //重置
  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  //查询
  const onSubmit = (val) => {
    loading.value = true
    const data = JSON.parse(JSON.stringify(val))
    for (let key in data) {
      if (Array.isArray(data[key])) {
        const a = data[key]
        data[key] = `${a[0]} 00:00:00,${a[1]} 23:59:59`
      }
    }
    getTableList(data)
    setTimeout(() => {
      loading.value = false
    }, 500)
  }

  onMounted(() => {
    for (let item of baseColumns) {
      if (item.search) {
        item!.value = ''
      }
    }
    console.log(baseColumns)
    nextTick(() => {
      getTableList({ pageNum: 1, pageSize: 20 })
    })
    setTimeout(() => {
      loading.value = false
    }, 500)
  })
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
